<template>
  <div id="designer">
    <div id="designer-host"></div>
    <div class="modal" id="dlgOpen" v-if="true" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Open Report</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <h2>Select Report:</h2>
            <div class="list-group">
              <button
                type="button"
                class="list-group-item list-group-item-action"
                v-for="reportId in reportIds"
                v-on:click="onSelectReport(reportId)"
                :key="reportId"
              >
                {{ reportId }}
              </button>
            </div>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Designer as ReportDesigner,
  templates
} from '@grapecity/activereports/reportdesigner'
import "@grapecity/activereports-localization/dist/designer/zh-locale";

let resolveFunc = null
let designer = null
export default {
  name: 'designer',
  data() {
    return {
      reportStorage: new Map(),
      counter: 0
    }
  },
  computed: {
    reportIds() {
      const ret = this.counter ? [...this.reportStorage.keys()] : []
      return ret
    }
  },
  methods: {
    onSelectReport(reportId) {
      if (resolveFunc) {
        document.getElementById('dlgOpen').modal = 'hide'
        resolveFunc({ definition: this.reportStorage.get(reportId), id: reportId, displayName: reportId })
        resolveFunc = null
      }
    }
  },
  mounted: function() {

    designer = new ReportDesigner('#designer-host', { language: 'zh' })
    designer.setActionHandlers({
      onCreate: () => {
        const reportId = `NewReport${this.counter + 1}`
        this.counter++
        return Promise.resolve({ definition: templates.CPL, id: reportId, displayName: reportId })
      },
      onOpen: function() {
        const ret = new Promise(function(resolve) {
          resolveFunc = resolve
          document.getElementById('dlgOpen').modal = 'show'
        })
        return ret
      },
      onSave: (info) => {
        const reportId = info.id || `NewReport${this.counter + 1}`
        this.reportStorage.set(reportId, info.definition)
        this.counter++
        return Promise.resolve({ displayName: reportId })
      },
      onSaveAs: (info) => {
        const reportId = `NewReport${this.counter + 1}`
        this.reportStorage.set(reportId, info.definition)
        this.counter++
        console.log(info.definition)
        return Promise.resolve({ id: reportId, displayName: reportId })
      }
    })
  }
}
</script>

<style>
@import url("https://demo.grapecity.com.cn/activereportsjs/demos/arjs/styles/ar-js-ui.css");
@import url("https://demo.grapecity.com.cn/activereportsjs/demos/arjs/styles/ar-js-designer.css");

#designer-host {
  width: 100%;
  height: 90vh;
}
</style>
